<template>
  <section class="page garage-management">
    <data-form :model="dataForm" @onSearch="refreshData" :page="pageService">
      <template slot="inputs">
        <el-form-item label="车库编号" prop="garageCode">
          <el-input v-model="dataForm.garageCode"></el-input>
        </el-form-item>
        <el-form-item label="车库名称" prop="garageName">
          <el-input v-model="dataForm.garageName"></el-input>
        </el-form-item>
        <el-form-item label="车库地址" prop="addressDetail">
          <el-input v-model="dataForm.addressDetail"></el-input>
        </el-form-item>
        <!-- <el-form-item label="车库地址" prop="areaId">
          <el-cascader v-model="areaId" :options="$city.getCityData()" change-on-select clearable></el-cascader>
        </el-form-item> -->
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="dataForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="dataForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="commonState">
          <el-select v-model="dataForm.commonState" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <el-button @click="grageObj={};dialog.show = true;" v-auth="1535">新增车库</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <el-button @click="grageObj=scope.row;dialog.show = true;" type="text" v-auth="1536">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="garageCode" label="车库编号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="garageName" label="车库名称" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="areaId" label="省市区" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)" :formatter="row => $city.getInheritNames(Number(row.areaId))"></el-table-column>
        <el-table-column prop="addressDetail" label="车库地址" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="contactName" label="联系人" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="contactPhone" label="联系电话" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="garageArea" label="车库面积" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="commonState" label="状态" :formatter="(row) => $filter.dictConvert(row.commonState,'CommonState')" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
      </template>
    </data-box>

    <el-dialog :title="grageObj.id?'修改车库':'新增车库'" :center="true" :visible.sync="dialog.show" width="710px" @open="$nextTick(()=>$refs['add-garage'].update(grageObj))" @close="$refs['add-garage'].reset()" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <add-garage ref="add-garage" @close="dialog.show = false" @refreshList="refreshData" />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout , Auth} from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";
import { CarManageService } from "~/services/domain-service/car-manage.service";
import AddGarage from '~/components/car-management/add-garage.vue';

@Auth(1531)
@Layout('workspace')
@Component({
  components: {
    AddGarage,
  }
})

export default class GarageManagement extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CarManageService)
  private carManageService: CarManageService;
  private dataSet: any = []
  private dataForm: any = {
    garageCode: "",
    garageName: "",
    addressDetail: "",
    contactName: "",
    contactPhone: "",
    commonState: ""
  }
  private dialog: any = {
    show: false
  }
  private grageObj: any = {};

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.carManageService
      .getAllGarages(this.dataForm, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private onClickAddCar() {
    this.dialog.show = true
  }

  private onClickEdit(row) { }

}
</script>